<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  <!-- <script src="./js/zrender.js"></script> -->

  <title></title>
</head>

<body>
  <div id="container" style="height: 800px;width: 800px; "></div>
  <script>
    var zr = zrender.init(document.getElementById('container'));
    var rect = new zrender.Rect({
      shape: {
        x: 100,
        y: 100,
        width: 200,
        height: 100,
        r: [30],
      },
      style: {
        fill: 'red',
        stroke: 'none',//描边颜色，边框
      },
    //  z: 1, 层级

    });
    var circle = new zrender.Circle({
      shape: {
        cx: 50,
        cy: 100,
        r:30
     
      },
      style: {
        fill: 'blue',
        stroke: 'green',//描边颜色，边框
        lineWidth:2,
      },
    //  z: 1, 层级

    });

    var arc = new zrender.Arc({
      shape: {
        cx: 400,
        cy: 100,
        r:50,
        startAngle:-35, //弧度
        clockwise:false, //旋转
     
      },
      style: {
    //    fill: 'blue',
        stroke: 'green',//描边颜色，边框
        lineWidth:30,
      },
    //  z: 1, 层级

    });

    rect.animate('shape', true)
      .when(1000, { x: 100 })
      .when(2000, { x: 0 })
      .when(3000, { y: 100 })
      .when(4000, { y: 0 })
      .start();

    rect.on('click', function (e) { //click点击事件
      // console.log('被点击')
      window.open('https://gitee.com/yang-kunlin-ykl/big-data_echarts')
    });
    zr.add(rect);
    zr.add(circle);
    zr.add(arc);
  </script>
</body>

</html>